#override("title")
咕泡商城 - 注册
#end
#override("css")
<link type="text/css" href="#springUrl('resources/css/register/index.css')" rel="stylesheet" />
#end
#override("body")
<header>
	<a href="#" class="logo"></a>
	<div class="desc">欢迎注册</div>
</header>
<section>
	<form>
		<div class="register-box">
			<label class="username_label">用 户 名
			<input maxlength="20" id="username" type="text" placeholder="您的用户名和登录名"/>
			</label>
			<div class="tips">

			</div>
		</div>
		<div class="register-box">
			<label class="other_label">设 置 密 码
			<input maxlength="20" id="password" type="password" placeholder="建议至少使用两种字符组合"/>
			</label>
			<div class="tips">

			</div>
		</div>
		<div class="register-box">
			<label class="other_label">确 认 密 码
			<input maxlength="20" type="password" placeholder="请再次输入密码"/>
			</label>
			<div class="tips">

			</div>
		</div>
		<div class="register-box">
			<label class="other_label">
			<span>中国 0086∨</span>
			<input class="phone" maxlength="20" id="mobile" type="text" placeholder="建议使用常用手机"/>
			</label>
			<div class="tips">

			</div>
		</div>
		<!--<div class="register-box">
			<label class="other_label">验 证 码
			<input maxlength="20" type="text" placeholder="请输入验证码"/>
			</label>
			<span id="code"></span>
			<div class="tips">

			</div>
		</div>-->
		<div class="arguement">
			<input type="checkbox" id="xieyi"/>
			阅读并同意
			<a href="#">《咕泡用户注册协议》</a>
			<a href="#">《隐私政策》</a>
			<div class="tips">
			</div>
		</div>
		<div class="submit_btn">
			<button type="button" id="submit_btn">立 即 注 册</button>
		</div>
	</form>
</section>
#end
#override("js")
<script src="#springUrl('/resources/js/MD5.js')"></script>

<script>
    //聚焦失焦input
    $('input').eq(0).focus(function(){
        if($(this).val().length==0){
            $(this).parent().next("div").text("支持中文，字母，数字，'-'，'_'的多种组合");
        }
    })
    $('input').eq(1).focus(function(){
        if($(this).val().length==0){
            $(this).parent().next("div").text("建议使用字母、数字和符号两种以上的组合，6-20个字符");
        }
    })
    $('input').eq(2).focus(function(){
        if($(this).val().length==0){
            $(this).parent().next("div").text("请再次输入密码");
        }
    })
    $('input').eq(3).focus(function(){
        if($(this).val().length==0){
            $(this).parent().next("div").text("验证完后，你可以使用该手机登陆和找回密码");
        }
    })
    $('input').eq(4).focus(function(){
        if($(this).val().length==0){
            $(this).parent().next().next("div").text("看不清？点击图片更换验证码");
        }
    })
    //input各种判断
    //用户名：
    $('input').eq(0).blur(function(){
        if($(this).val().length==0){
            $(this).parent().next("div").text("");
            $(this).parent().next("div").css("color",'#ccc');
        }else if($(this).val().length>0 && $(this).val().length<4){
            $(this).parent().next("div").text("长度只能在4-20个字符之间");
            $(this).parent().next("div").css("color",'red');
        }else if($(this).val().length>=4&& !isNaN($(this).val())){
            $(this).parent().next("div").text("用户名不能为纯数字");
            $(this).parent().next("div").css("color",'red');
        }
    })
    //密码
    $('input').eq(1).blur(function(){
        if($(this).val().length==0){
            $(this).parent().next("div").text("");
            $(this).parent().next("div").css("color",'#ccc');
        }else if($(this).val().length>0 && $(this).val().length<6){
            $(this).parent().next("div").text("长度只能在6-20个字符之间");
            $(this).parent().next("div").css("color",'red');
        }else{
            $(this).parent().next("div").text("");
        }
    })
    //	确认密码
    $('input').eq(2).blur(function(){
        if($(this).val().length==0){
            $(this).parent().next("div").text("");
            $(this).parent().next("div").css("color",'#ccc');
        }else if($(this).val()!=$('input').eq(1).val()){
            $(this).parent().next("div").text("两次密码不匹配");
            $(this).parent().next("div").css("color",'red');
        }else{
            $(this).parent().next("div").text("");
        }
    })
    //	手机号
    $('input').eq(3).blur(function(){
        if($(this).val().length==0){
            $(this).parent().next("div").text("");
            $(this).parent().next("div").css("color",'#ccc');
        }else if($(this).val().substr(0,3)!=138&&$(this).val().substr(0,3)!=189&&$(this).val().substr(0,3)!=139&&$(this).val().substr(0,3)!=158&&$(this).val().substr(0,3)!=188&&$(this).val().substr(0,3)!=157||$(this).val().length!=11){
            $(this).parent().next("div").text("手机号格式不正确");
            $(this).parent().next("div").css("color",'red');
        }else{
            $(this).parent().next("div").text("");
        }
    })

    //	提交按钮
    $("#submit_btn").click(function(e){
        for(var j=0 ;j<5;j++){
            if($('input').eq(j).val().length==0){
                $('input').eq(j).focus();
                if(j==4){
                    $('input').eq(j).parent().next().next("div").text("此处不能为空");
                    $('input').eq(j).parent().next().next("div").css("color",'red');
                    e.preventDefault();
                    return;
                }
                $('input').eq(j).parent().next(".tips").text("此处不能为空");
                $('input').eq(j).parent().next(".tips").css("color",'red');
                e.preventDefault();
                return;
            }
        }
        //协议
        if($("#xieyi")[0].checked){
            $("#password").val(MD5($("#password").val()));
			TOOLS.doPost({username:$("#username").val(),password:$("#password").val(),
			mobile:$("#mobile").val()},"#springUrl('/register.shtml')",function(response){
			   alert(response.code);
			});
        }else{
            $("#xieyi").next().next().next(".tips").text("请勾选协议");
            $("#xieyi").next().next().next(".tips").css("color",'red');
            e.preventDefault();
            return;
        }
    })
</script>
#end

#extends("/common/base.html")

